<!DOCTYPE html>
<html lang=zh>
<head>
    <!-- so meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />
    <meta name="description" content="ES6+指的是ES6之后发布的版本，由于ES6相比ES5版本更新较大，因此一般会把ES6作为单独的版本来说，而ES6之后的版本可以统称为ES6+。 本章节只会介绍一些ES6+零碎的知识点，如果有重要知识点，会提炼出单独的章节做出总结。 ES7Array Includes在ES7之前，如果我们需要判断一个数组中是否包含某个元素，需要通过 indexOf 获取结果，并且判断返回值是否为 -1 。 12">
<meta property="og:type" content="article">
<meta property="og:title" content="ES6+">
<meta property="og:url" content="https://danyuan30.gitee.io/2022/02/05/JavaScript/ES6+/index.html">
<meta property="og:site_name" content="柯里的语法糖">
<meta property="og:description" content="ES6+指的是ES6之后发布的版本，由于ES6相比ES5版本更新较大，因此一般会把ES6作为单独的版本来说，而ES6之后的版本可以统称为ES6+。 本章节只会介绍一些ES6+零碎的知识点，如果有重要知识点，会提炼出单独的章节做出总结。 ES7Array Includes在ES7之前，如果我们需要判断一个数组中是否包含某个元素，需要通过 indexOf 获取结果，并且判断返回值是否为 -1 。 12">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2022-02-05T06:19:40.048Z">
<meta property="article:modified_time" content="2022-02-05T06:19:40.049Z">
<meta property="article:author" content="柯里的语法糖">
<meta property="article:tag" content="JavaScript">
<meta name="twitter:card" content="summary">
    
    
      
        
          <link rel="shortcut icon" href="https://codertzm.oss-cn-chengdu.aliyuncs.com/favicon.ico">
        
      
      
        
          <link rel="icon" type="image/png" href="https://codertzm.oss-cn-chengdu.aliyuncs.com/favicon.ico" sizes="192x192">
        
      
      
        
          <link rel="apple-touch-icon" sizes="180x180" href="https://codertzm.oss-cn-chengdu.aliyuncs.com/favicon.ico">
        
      
    
    <!-- title -->
    <title>ES6+</title>
    <!-- styles -->
    
<link rel="stylesheet" href="/css/style.css">

    <!-- persian styles -->
    
    <!-- rss -->
    
    
	<!-- mathjax -->
	
<meta name="generator" content="Hexo 6.0.0"></head>

<body class="max-width mx-auto px3 ltr">
    
      <div id="header-post">
  <a id="menu-icon" href="#" aria-label="Menu"><i class="fas fa-bars fa-lg"></i></a>
  <a id="menu-icon-tablet" href="#" aria-label="Menu"><i class="fas fa-bars fa-lg"></i></a>
  <a id="top-icon-tablet" href="#" aria-label="Top" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');" style="display:none;"><i class="fas fa-chevron-up fa-lg"></i></a>
  <span id="menu">
    <span id="nav">
      <ul>
        <!--
       --><li><a href="/">首页</a></li><!--
     --><!--
       --><li><a href="/tags/">标签</a></li><!--
     --><!--
       --><li><a href="/categories/">分类</a></li><!--
     --><!--
       --><li><a href="/archives/">归档</a></li><!--
     --><!--
       --><li><a target="_blank" rel="noopener" href="http://github.com/twitzz">项目</a></li><!--
     --><!--
       --><li><a href="/about/">关于</a></li><!--
     --><!--
       --><li><a href="/search/">搜索</a></li><!--
     -->
      </ul>
    </span>
    <br/>
    <span id="actions">
      <ul>
        
        <li><a class="icon" aria-label="上一篇" href="/2022/02/05/JavaScript/ES6/"><i class="fas fa-chevron-left" aria-hidden="true" onmouseover="$('#i-prev').toggle();" onmouseout="$('#i-prev').toggle();"></i></a></li>
        
        
        <li><a class="icon" aria-label="下一篇" href="/2022/02/02/frontend/git%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/"><i class="fas fa-chevron-right" aria-hidden="true" onmouseover="$('#i-next').toggle();" onmouseout="$('#i-next').toggle();"></i></a></li>
        
        <li><a class="icon" aria-label="返回顶部" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fas fa-chevron-up" aria-hidden="true" onmouseover="$('#i-top').toggle();" onmouseout="$('#i-top').toggle();"></i></a></li>
        <li><a class="icon" aria-label="分享文章" href="#"><i class="fas fa-share-alt" aria-hidden="true" onmouseover="$('#i-share').toggle();" onmouseout="$('#i-share').toggle();" onclick="$('#share').toggle();return false;"></i></a></li>
      </ul>
      <span id="i-prev" class="info" style="display:none;">上一篇</span>
      <span id="i-next" class="info" style="display:none;">下一篇</span>
      <span id="i-top" class="info" style="display:none;">返回顶部</span>
      <span id="i-share" class="info" style="display:none;">分享文章</span>
    </span>
    <br/>
    <div id="share" style="display: none">
      <ul>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.facebook.com/sharer.php?u=https://danyuan30.gitee.io/2022/02/05/JavaScript/ES6+/"><i class="fab fa-facebook " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://twitter.com/share?url=https://danyuan30.gitee.io/2022/02/05/JavaScript/ES6+/&text=ES6+"><i class="fab fa-twitter " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.linkedin.com/shareArticle?url=https://danyuan30.gitee.io/2022/02/05/JavaScript/ES6+/&title=ES6+"><i class="fab fa-linkedin " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://pinterest.com/pin/create/bookmarklet/?url=https://danyuan30.gitee.io/2022/02/05/JavaScript/ES6+/&is_video=false&description=ES6+"><i class="fab fa-pinterest " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=ES6+&body=Check out this article: https://danyuan30.gitee.io/2022/02/05/JavaScript/ES6+/"><i class="fas fa-envelope " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://getpocket.com/save?url=https://danyuan30.gitee.io/2022/02/05/JavaScript/ES6+/&title=ES6+"><i class="fab fa-get-pocket " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://reddit.com/submit?url=https://danyuan30.gitee.io/2022/02/05/JavaScript/ES6+/&title=ES6+"><i class="fab fa-reddit " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.stumbleupon.com/submit?url=https://danyuan30.gitee.io/2022/02/05/JavaScript/ES6+/&title=ES6+"><i class="fab fa-stumbleupon " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://digg.com/submit?url=https://danyuan30.gitee.io/2022/02/05/JavaScript/ES6+/&title=ES6+"><i class="fab fa-digg " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.tumblr.com/share/link?url=https://danyuan30.gitee.io/2022/02/05/JavaScript/ES6+/&name=ES6+&description="><i class="fab fa-tumblr " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://news.ycombinator.com/submitlink?u=https://danyuan30.gitee.io/2022/02/05/JavaScript/ES6+/&t=ES6+"><i class="fab fa-hacker-news " aria-hidden="true"></i></a></li>
</ul>

    </div>
    <div id="toc">
      <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#ES7"><span class="toc-number">1.</span> <span class="toc-text">ES7</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Array-Includes"><span class="toc-number">1.1.</span> <span class="toc-text">Array Includes</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8C%87%E6%95%B0%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">1.2.</span> <span class="toc-text">指数运算符</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES8"><span class="toc-number">2.</span> <span class="toc-text">ES8</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Object-values"><span class="toc-number">2.1.</span> <span class="toc-text">Object.values</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Object-entries"><span class="toc-number">2.2.</span> <span class="toc-text">Object.entries</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#String-Padding"><span class="toc-number">2.3.</span> <span class="toc-text">String Padding</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Trailing-Commas"><span class="toc-number">2.4.</span> <span class="toc-text">Trailing Commas</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Object-getOwnPropertyDescriptor"><span class="toc-number">2.5.</span> <span class="toc-text">Object.getOwnPropertyDescriptor</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES9"><span class="toc-number">3.</span> <span class="toc-text">ES9</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES10"><span class="toc-number">4.</span> <span class="toc-text">ES10</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Array-flat"><span class="toc-number">4.1.</span> <span class="toc-text">Array flat</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Array-flatMap"><span class="toc-number">4.2.</span> <span class="toc-text">Array flatMap</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Object-fromEntries"><span class="toc-number">4.3.</span> <span class="toc-text">Object fromEntries</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#trimStart-trimEnd"><span class="toc-number">4.4.</span> <span class="toc-text">trimStart trimEnd</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ES10%E5%85%B6%E5%AE%83%E7%9F%A5%E8%AF%86%E7%82%B9"><span class="toc-number">4.5.</span> <span class="toc-text">ES10其它知识点</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES11"><span class="toc-number">5.</span> <span class="toc-text">ES11</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#BigInt"><span class="toc-number">5.1.</span> <span class="toc-text">BigInt</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Nullish-Coalescing-Operator%EF%BC%88%E7%A9%BA%E5%80%BC%E5%90%88%E5%B9%B6%E8%BF%90%E7%AE%97%E7%AC%A6%EF%BC%89"><span class="toc-number">5.2.</span> <span class="toc-text">Nullish Coalescing Operator（空值合并运算符）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Optional-Chaining%EF%BC%88%E5%8F%AF%E9%80%89%E9%93%BE%EF%BC%89"><span class="toc-number">5.3.</span> <span class="toc-text">Optional Chaining（可选链）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#globalThis"><span class="toc-number">5.4.</span> <span class="toc-text">globalThis</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ES11%E5%85%B6%E5%AE%83%E7%9F%A5%E8%AF%86%E7%82%B9"><span class="toc-number">5.5.</span> <span class="toc-text">ES11其它知识点</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES12"><span class="toc-number">6.</span> <span class="toc-text">ES12</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#FinalizationRegistry"><span class="toc-number">6.1.</span> <span class="toc-text">FinalizationRegistry</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#WeakRef"><span class="toc-number">6.2.</span> <span class="toc-text">WeakRef</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#logical-assignment-operators"><span class="toc-number">6.3.</span> <span class="toc-text">logical assignment operators</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%80%BB%E8%BE%91%E6%88%96%E8%B5%8B%E5%80%BC%E8%BF%90%E7%AE%97"><span class="toc-number">6.3.1.</span> <span class="toc-text">逻辑或赋值运算</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%80%BB%E8%BE%91%E7%A9%BA%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">6.3.2.</span> <span class="toc-text">逻辑空运算符</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%80%BB%E8%BE%91%E4%B8%8E%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">6.3.3.</span> <span class="toc-text">逻辑与运算符</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ES12%E5%AE%83%E7%9F%A5%E8%AF%86%E7%82%B9"><span class="toc-number">6.4.</span> <span class="toc-text">ES12它知识点</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%80%BB%E7%BB%93"><span class="toc-number">7.</span> <span class="toc-text">总结</span></a></li></ol>
    </div>
  </span>
</div>

    
    <div class="content index py4">
        
        <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
  <header>
    
    <h1 class="posttitle" itemprop="name headline">
        ES6+
    </h1>



    <div class="meta">
      <span class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">柯里的语法糖</span>
      </span>
      
    <div class="postdate">
      
        <time datetime="2022-02-05T06:19:40.048Z" itemprop="datePublished">2022-02-05</time>
        
      
    </div>


      
    <div class="article-category">
        <i class="fas fa-archive"></i>
        <a class="category-link" href="/categories/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/">前端基础</a>
    </div>


      
    <div class="article-tag">
        <i class="fas fa-tag"></i>
        <a class="tag-link-link" href="/tags/JavaScript/" rel="tag">JavaScript</a>
    </div>


    </div>
  </header>
  

  <div class="content" itemprop="articleBody">
    <p>ES6+指的是ES6之后发布的版本，由于ES6相比ES5版本更新较大，因此一般会把ES6作为单独的版本来说，而ES6之后的版本可以统称为ES6+。</p>
<p>本章节只会介绍一些ES6+零碎的知识点，如果有重要知识点，会提炼出单独的章节做出总结。</p>
<h2 id="ES7"><a href="#ES7" class="headerlink" title="ES7"></a>ES7</h2><h3 id="Array-Includes"><a href="#Array-Includes" class="headerlink" title="Array Includes"></a>Array Includes</h3><p>在ES7之前，如果我们需要判断一个数组中是否包含某个元素，需要通过 <code>indexOf</code> 获取结果，并且判断返回值是否为 <code>-1</code> 。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数组是否包含2这个数字</span></span><br><span class="line"><span class="keyword">if</span> (arr.indexOf(<span class="number">2</span>) !== -<span class="number">1</span>) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;find it&#x27;</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>ES7提供了 <code>includes</code> 方法来判断一个数组中是否包含一个指定的元素。如果有，返回 <code>true</code> ，否则返回 <code>false</code> 。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (arr.includes(<span class="number">2</span>)) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;find it&#x27;</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="指数运算符"><a href="#指数运算符" class="headerlink" title="指数运算符"></a>指数运算符</h3><p>在ES7之前，计算数字的乘方需要通过 <code>Math.pow</code> 方法来完成。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> res = <span class="built_in">Math</span>.pow(<span class="number">2</span>,<span class="number">3</span>)</span><br><span class="line"><span class="built_in">console</span>.log(res) <span class="comment">// 8</span></span><br></pre></td></tr></table></figure>

<p>ES7增加了 <code>**</code> 运算符，可以对数字来计算乘方。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> res = <span class="number">2</span> ** <span class="number">3</span></span><br><span class="line"><span class="built_in">console</span>.log(res) <span class="comment">// 8</span></span><br></pre></td></tr></table></figure>

<h2 id="ES8"><a href="#ES8" class="headerlink" title="ES8"></a>ES8</h2><h3 id="Object-values"><a href="#Object-values" class="headerlink" title="Object.values"></a>Object.values</h3><p>ES8中提供了 <code>Object.values()</code> 来获取所有的value值。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;curry&#x27;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="number">33</span>,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.values(obj)) <span class="comment">// [ &#x27;curry&#x27;, 33 ]</span></span><br></pre></td></tr></table></figure>

<h3 id="Object-entries"><a href="#Object-entries" class="headerlink" title="Object.entries"></a>Object.entries</h3><p>通过 <code>Object.entries</code> 可以获取到一个数组，数组中会存放可枚举属性的键值对数组。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;curry&#x27;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="number">33</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 如果是一个对象</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.entries(obj)) <span class="comment">// [ [ &#x27;name&#x27;, &#x27;curry&#x27; ], [ &#x27;age&#x27;, 33 ] ]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 如果是一个数组</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.entries([<span class="string">&#x27;curry&#x27;</span>,<span class="string">&#x27;james&#x27;</span>,<span class="string">&#x27;harden&#x27;</span>])) <span class="comment">// [ [ &#x27;0&#x27;, &#x27;curry&#x27; ], [ &#x27;1&#x27;, &#x27;james&#x27; ], [ &#x27;2&#x27;, &#x27;harden&#x27; ] ]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 如果是一个字符串</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.entries(<span class="string">&#x27;abc&#x27;</span>)) <span class="comment">// [ [ &#x27;0&#x27;, &#x27;a&#x27; ], [ &#x27;1&#x27;, &#x27;b&#x27; ], [ &#x27;2&#x27;, &#x27;c&#x27; ] ]</span></span><br></pre></td></tr></table></figure>

<h3 id="String-Padding"><a href="#String-Padding" class="headerlink" title="String Padding"></a>String Padding</h3><p>某些字符串我们需要对其进行前后的填充，来实现某种格式化效果。</p>
<p>ES8中增加了 <code>padStart</code> 和 <code>padEnd</code> 方法，分别是对字符串的首尾进行填充的。</p>
<p>例子：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> str = <span class="string">&quot;hello world&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 第一个参数是填充后字符的长度，第二个参数是填充的字符</span></span><br><span class="line"><span class="built_in">console</span>.log(str.padStart(<span class="number">15</span>,<span class="string">&#x27;*&#x27;</span>)) <span class="comment">// ****hello world</span></span><br><span class="line"><span class="built_in">console</span>.log(str.padEnd(<span class="number">15</span>,<span class="string">&#x27;*&#x27;</span>)) <span class="comment">// hello world****</span></span><br></pre></td></tr></table></figure>

<p>应用场景（对身份证、银行卡的前面位数进行隐藏）：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> cardNumber = <span class="string">&#x27;2131252325331231312&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> tempNumber = cardNumber.slice(-<span class="number">4</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> finalNumber = tempNumber.padStart(cardNumber.length, <span class="string">&#x27;*&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(finalNumber) <span class="comment">// ***************1312</span></span><br></pre></td></tr></table></figure>

<h3 id="Trailing-Commas"><a href="#Trailing-Commas" class="headerlink" title="Trailing Commas"></a>Trailing Commas</h3><p>ES8中允许在函数定义和调用时多加一个逗号。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">a, b, </span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> a + b</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">add(<span class="number">1</span>, <span class="number">1</span>, )</span><br></pre></td></tr></table></figure>

<h3 id="Object-getOwnPropertyDescriptor"><a href="#Object-getOwnPropertyDescriptor" class="headerlink" title="Object.getOwnPropertyDescriptor"></a>Object.getOwnPropertyDescriptor</h3><p>通过 <code>Object.getOwnPropertyDescriptor(obj,prop)</code> 获取指定对象上一个自有属性对应的属性描述符。（自有属性指的是 <strong>直接赋予该对象的属性</strong> ，不需要从原型链上进行查找的属性）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>:<span class="string">&#x27;curry&#x27;</span>,</span><br><span class="line">  <span class="attr">age</span>:<span class="number">33</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// &#123;</span></span><br><span class="line"><span class="comment">//   value: &#x27;curry&#x27;,</span></span><br><span class="line"><span class="comment">//   writable: true,</span></span><br><span class="line"><span class="comment">//   enumerable: true,</span></span><br><span class="line"><span class="comment">//   configurable: true</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.getOwnPropertyDescriptor(obj,<span class="string">&quot;name&quot;</span>)) </span><br></pre></td></tr></table></figure>

<blockquote>
<p><code>Object.getOwnPropertyDescriptors(obj)</code> 可以获取制定对象的所有自有属性的属性描述符</p>
</blockquote>
<h2 id="ES9"><a href="#ES9" class="headerlink" title="ES9"></a>ES9</h2><p><code>Async iterators</code> ：后续迭代器章节。</p>
<p><code>Object spread operators</code> ：ES6的章节中的展开语法介绍过。</p>
<p><code>Promise finally</code> ：后续 <code>Promise</code> 章节。</p>
<h2 id="ES10"><a href="#ES10" class="headerlink" title="ES10"></a>ES10</h2><h3 id="Array-flat"><a href="#Array-flat" class="headerlink" title="Array flat"></a>Array flat</h3><p><code>flat()</code> 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>,[<span class="number">24</span>,[<span class="number">46</span>]],<span class="number">29</span>]</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(arr.flat()) <span class="comment">// [ 1, 24, [ 46 ], 29 ]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 深度为 2</span></span><br><span class="line"><span class="built_in">console</span>.log(arr.flat(<span class="number">2</span>))</span><br><span class="line"></span><br><span class="line"><span class="comment">// 转换成一维数组</span></span><br><span class="line"><span class="built_in">console</span>.log(arr.flat(<span class="literal">Infinity</span>)) <span class="comment">// [ 1, 24, 46, 29 ]</span></span><br></pre></td></tr></table></figure>

<h3 id="Array-flatMap"><a href="#Array-flatMap" class="headerlink" title="Array flatMap"></a>Array flatMap</h3><p><code>flatMap()</code> 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。</p>
<p><strong>注意：</strong></p>
<ol>
<li><code>flatMap</code> 是先进行 <code>map</code> 操作，再做 <code>flat</code> 的操作。</li>
<li><code>flatMap</code> 中的 <code>flat</code> 相当于深度为 1。</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="string">&#x27;hello world&#x27;</span>,<span class="string">&#x27;my name is &#x27;</span>,<span class="string">&#x27;stephen curry&#x27;</span>]</span><br><span class="line"></span><br><span class="line"><span class="comment">// flat</span></span><br><span class="line"><span class="keyword">const</span> newArr1 = arr.flatMap(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> item.split(<span class="string">&quot; &quot;</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 没有flat</span></span><br><span class="line"><span class="keyword">const</span> newArr2 = arr.map(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> item.split(<span class="string">&quot; &quot;</span>)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="Object-fromEntries"><a href="#Object-fromEntries" class="headerlink" title="Object fromEntries"></a>Object fromEntries</h3><p>我们可以通过 <code>Object.entries()</code> 将一个对象转换成 <code>entries</code>，ES9为我们提供了 <code>Object fromEntries()</code> 将 <code>entries</code> 转换为对象。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;curry&#x27;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="number">33</span>,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> entries = <span class="built_in">Object</span>.entries(obj)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(entries)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.fromEntries(entries)) <span class="comment">// &#123; name: &#x27;curry&#x27;, age: 33 &#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="trimStart-trimEnd"><a href="#trimStart-trimEnd" class="headerlink" title="trimStart trimEnd"></a>trimStart trimEnd</h3><p>我们可以通过 <code>trim()</code> 方法去除一个字符串首尾的空格。</p>
<p>ES10中给我们提供了 <code>trimStart</code> 和 <code>trimEnd</code> 单独去除首部或者尾部的空格。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> str = <span class="string">&#x27;  hello world   &#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(str.trimStart()); <span class="comment">// hello world   </span></span><br><span class="line"><span class="built_in">console</span>.log(str.trimEnd()) <span class="comment">//  hello world</span></span><br></pre></td></tr></table></figure>

<h3 id="ES10其它知识点"><a href="#ES10其它知识点" class="headerlink" title="ES10其它知识点"></a>ES10其它知识点</h3><p><code>Symbol description</code> ：在ES6的章节介绍过。</p>
<p><code>Optional catch binding</code> ：后续介绍异常捕获的章节中介绍。</p>
<h2 id="ES11"><a href="#ES11" class="headerlink" title="ES11"></a>ES11</h2><h3 id="BigInt"><a href="#BigInt" class="headerlink" title="BigInt"></a>BigInt</h3><p>在早期的JavaScript中，我们不能正确的表示过大的数字。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> maxInt = <span class="built_in">Number</span>.MAX_SAFE_INTEGER</span><br><span class="line"><span class="built_in">console</span>.log(maxInt) <span class="comment">// 9007199254740991</span></span><br></pre></td></tr></table></figure>

<p>超过 <code>Number.MAX_SAFE_INTEGER</code> 的数值表示可能是不正确的。</p>
<p>在ES11中引入了新的数据类型 <code>BigInt</code> 用来表示大的整数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> bigInt = <span class="number">9007199254740991n</span></span><br><span class="line"><span class="built_in">console</span>.log(bigInt) <span class="comment">// 9007199254740991n</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// BigInt类型的数字只能与同类型的数字运算</span></span><br><span class="line"><span class="built_in">console</span>.log(bigInt + <span class="built_in">BigInt</span>(<span class="number">10</span>))</span><br></pre></td></tr></table></figure>

<h3 id="Nullish-Coalescing-Operator（空值合并运算符）"><a href="#Nullish-Coalescing-Operator（空值合并运算符）" class="headerlink" title="Nullish Coalescing Operator（空值合并运算符）"></a>Nullish Coalescing Operator（空值合并运算符）</h3><p>在ES11前，我们使用判断默认值的时候，如果碰到 空字符串 和 数字0 的时候，<code>逻辑或</code> 运算符会将它们隐式类型转换为 <strong>布尔类型</strong> 的 <code>false</code> 。</p>
<p>ES11增加了 <code>Nullish Coalescing Operator（空值合并运算符）</code> ，0与空字符串就不会出现之前的问题了。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> foo = <span class="number">0</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> res1 = foo || <span class="string">&#x27;defalut value&#x27;</span></span><br><span class="line"><span class="keyword">const</span> res2 = foo ?? <span class="string">&#x27;defalut value&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(res1) <span class="comment">// defalut value</span></span><br><span class="line"><span class="built_in">console</span>.log(res2) <span class="comment">// 0</span></span><br></pre></td></tr></table></figure>

<h3 id="Optional-Chaining（可选链）"><a href="#Optional-Chaining（可选链）" class="headerlink" title="Optional Chaining（可选链）"></a>Optional Chaining（可选链）</h3><p>ES11新增的 <code>Optional Chaining（可选链）</code> ，让我们的代码在进行 <code>null</code> 和 <code>undefined</code> 判断时更加清晰和简洁。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>:<span class="string">&#x27;curry&#x27;</span>,</span><br><span class="line">  <span class="attr">teamate</span>:&#123;</span><br><span class="line">    <span class="comment">// name:&#x27;green&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(obj?.teamate?.name) <span class="comment">// undefined</span></span><br></pre></td></tr></table></figure>

<h3 id="globalThis"><a href="#globalThis" class="headerlink" title="globalThis"></a>globalThis</h3><p>在ES11中，我们获取JavaScript中的全局对象的方式是不同的：</p>
<ul>
<li>浏览器中可以通过 <code>this</code> 、 <code>window</code> 对象来获取。</li>
<li>Node中可以通过 <code>global</code> 来获取。</li>
</ul>
<p>ES11对获取全局对象作出了统一规范：使用 <code>globalThis</code> 关键字。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">global</span>) <span class="comment">// Node</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">this</span>) <span class="comment">// 浏览器</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">window</span>) <span class="comment">// 浏览器</span></span><br><span class="line"><span class="built_in">console</span>.log(globalThis) <span class="comment">// ES11 统一</span></span><br></pre></td></tr></table></figure>

<h3 id="ES11其它知识点"><a href="#ES11其它知识点" class="headerlink" title="ES11其它知识点"></a>ES11其它知识点</h3><p><code>Dynamic Import</code> ：后续模块化章节中介绍。<br><code>Promise.allSettled</code> ：后续 <code>Promise</code> 章节介绍。<br><code>import meta</code> ：后续模块化中章节中介绍。</p>
<h2 id="ES12"><a href="#ES12" class="headerlink" title="ES12"></a>ES12</h2><h3 id="FinalizationRegistry"><a href="#FinalizationRegistry" class="headerlink" title="FinalizationRegistry"></a>FinalizationRegistry</h3><p><code>FinalizationRegistry</code> 对象可以让你在对象被垃圾回收时请求一个回调。</p>
<ul>
<li><code>FinalizationRegistry</code> 提供了这样的一种方法：当一个在注册表中注册的对象被回收时，请求在某个时间点上调用一个清理回调。（清理回调有时被称为 <code>finalizer</code> ）。</li>
<li>你可以通过调用 <code>register</code> 方法，注册任何你想要清理回调的对象，传入该对象和所含的值。</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;curry&#x27;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="number">33</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> registry = <span class="keyword">new</span> FinalizationRegistry(<span class="function"><span class="params">value</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;对象被销毁了&quot;</span>,value)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">registry.register(obj,<span class="string">&quot;obj&quot;</span>)</span><br><span class="line"></span><br><span class="line">obj = <span class="literal">null</span></span><br></pre></td></tr></table></figure>

<h3 id="WeakRef"><a href="#WeakRef" class="headerlink" title="WeakRef"></a>WeakRef</h3><p>如果我们希望一个对象赋值给另外一个引用是弱引用，可以使用 <code>WeakRef</code> 。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> finalRegistry = <span class="keyword">new</span> FinalizationRegistry(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;注册在finalRegistry的对象, 某一个被销毁&quot;</span>, value)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> obj = &#123; <span class="attr">name</span>: <span class="string">&quot;why&quot;</span> &#125;</span><br><span class="line"><span class="keyword">let</span> info = <span class="keyword">new</span> WeakRef(obj)</span><br><span class="line"></span><br><span class="line">finalRegistry.register(obj, <span class="string">&quot;obj&quot;</span>)</span><br><span class="line"></span><br><span class="line">obj = <span class="literal">null</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// WeakRef.prototype.deref:</span></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(info.deref()?.name)</span><br><span class="line">  <span class="built_in">console</span>.log(info.deref() &amp;&amp; info.deref().name)</span><br><span class="line">&#125;, <span class="number">10000</span>)</span><br></pre></td></tr></table></figure>

<p>可以使用 <code>WeakRef.prototype.deref()</code> 获取到原来的对象：</p>
<ul>
<li>如果原来的对象没有销毁，那么可以获取到原来的对象。</li>
<li>如果原来的对象已经销毁了，那么获取到的是 <code>undefined</code> 。</li>
</ul>
<h3 id="logical-assignment-operators"><a href="#logical-assignment-operators" class="headerlink" title="logical assignment operators"></a>logical assignment operators</h3><h4 id="逻辑或赋值运算"><a href="#逻辑或赋值运算" class="headerlink" title="逻辑或赋值运算"></a>逻辑或赋值运算</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> str = <span class="string">&quot;&quot;</span></span><br><span class="line"></span><br><span class="line">str ||= <span class="string">&quot;default value&quot;</span></span><br><span class="line"><span class="comment">// 相当于</span></span><br><span class="line">str = str || <span class="string">&quot;default value&quot;</span></span><br><span class="line"><span class="built_in">console</span>.log(str) <span class="comment">// default value</span></span><br></pre></td></tr></table></figure>

<h4 id="逻辑空运算符"><a href="#逻辑空运算符" class="headerlink" title="逻辑空运算符"></a>逻辑空运算符</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> str = <span class="string">&quot;&quot;</span></span><br><span class="line"></span><br><span class="line">str ??= <span class="string">&quot;default value&quot;</span></span><br><span class="line"><span class="comment">// 相当于</span></span><br><span class="line">str = str ?? <span class="string">&quot;default value&quot;</span></span><br><span class="line"><span class="built_in">console</span>.log(str) <span class="comment">// &quot;&quot;</span></span><br></pre></td></tr></table></figure>

<h4 id="逻辑与运算符"><a href="#逻辑与运算符" class="headerlink" title="逻辑与运算符"></a>逻辑与运算符</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;curry&#x27;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="number">33</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">obj &amp;&amp;= obj.name</span><br><span class="line"><span class="built_in">console</span>.log(obj) <span class="comment">// curry</span></span><br></pre></td></tr></table></figure>

<h3 id="ES12它知识点"><a href="#ES12它知识点" class="headerlink" title="ES12它知识点"></a>ES12它知识点</h3><p><code>Numeric Separator</code> ：长数字的分隔符，ES6章节中介绍过。</p>
<p><code>String.replaceAll(pattern, replacement)</code> ：新字符串所有满足 <code>pattern</code> 的部分都已被 <code>replacement</code> 替换。</p>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>本章主要介绍了ES6+零碎的知识，并对这些知识进行了简单的demo演示，如果需要更加深入了解，请阅读 <code>ECMA规范</code> 或 <code>MDN文档</code> 。</p>

  </div>
</article>



        
          <div id="footer-post-container">
  <div id="footer-post">

    <div id="nav-footer" style="display: none">
      <ul>
         
          <li><a href="/">首页</a></li>
         
          <li><a href="/tags/">标签</a></li>
         
          <li><a href="/categories/">分类</a></li>
         
          <li><a href="/archives/">归档</a></li>
         
          <li><a target="_blank" rel="noopener" href="http://github.com/twitzz">项目</a></li>
         
          <li><a href="/about/">关于</a></li>
         
          <li><a href="/search/">搜索</a></li>
        
      </ul>
    </div>

    <div id="toc-footer" style="display: none">
      <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#ES7"><span class="toc-number">1.</span> <span class="toc-text">ES7</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Array-Includes"><span class="toc-number">1.1.</span> <span class="toc-text">Array Includes</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8C%87%E6%95%B0%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">1.2.</span> <span class="toc-text">指数运算符</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES8"><span class="toc-number">2.</span> <span class="toc-text">ES8</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Object-values"><span class="toc-number">2.1.</span> <span class="toc-text">Object.values</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Object-entries"><span class="toc-number">2.2.</span> <span class="toc-text">Object.entries</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#String-Padding"><span class="toc-number">2.3.</span> <span class="toc-text">String Padding</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Trailing-Commas"><span class="toc-number">2.4.</span> <span class="toc-text">Trailing Commas</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Object-getOwnPropertyDescriptor"><span class="toc-number">2.5.</span> <span class="toc-text">Object.getOwnPropertyDescriptor</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES9"><span class="toc-number">3.</span> <span class="toc-text">ES9</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES10"><span class="toc-number">4.</span> <span class="toc-text">ES10</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Array-flat"><span class="toc-number">4.1.</span> <span class="toc-text">Array flat</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Array-flatMap"><span class="toc-number">4.2.</span> <span class="toc-text">Array flatMap</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Object-fromEntries"><span class="toc-number">4.3.</span> <span class="toc-text">Object fromEntries</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#trimStart-trimEnd"><span class="toc-number">4.4.</span> <span class="toc-text">trimStart trimEnd</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ES10%E5%85%B6%E5%AE%83%E7%9F%A5%E8%AF%86%E7%82%B9"><span class="toc-number">4.5.</span> <span class="toc-text">ES10其它知识点</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES11"><span class="toc-number">5.</span> <span class="toc-text">ES11</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#BigInt"><span class="toc-number">5.1.</span> <span class="toc-text">BigInt</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Nullish-Coalescing-Operator%EF%BC%88%E7%A9%BA%E5%80%BC%E5%90%88%E5%B9%B6%E8%BF%90%E7%AE%97%E7%AC%A6%EF%BC%89"><span class="toc-number">5.2.</span> <span class="toc-text">Nullish Coalescing Operator（空值合并运算符）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Optional-Chaining%EF%BC%88%E5%8F%AF%E9%80%89%E9%93%BE%EF%BC%89"><span class="toc-number">5.3.</span> <span class="toc-text">Optional Chaining（可选链）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#globalThis"><span class="toc-number">5.4.</span> <span class="toc-text">globalThis</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ES11%E5%85%B6%E5%AE%83%E7%9F%A5%E8%AF%86%E7%82%B9"><span class="toc-number">5.5.</span> <span class="toc-text">ES11其它知识点</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES12"><span class="toc-number">6.</span> <span class="toc-text">ES12</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#FinalizationRegistry"><span class="toc-number">6.1.</span> <span class="toc-text">FinalizationRegistry</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#WeakRef"><span class="toc-number">6.2.</span> <span class="toc-text">WeakRef</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#logical-assignment-operators"><span class="toc-number">6.3.</span> <span class="toc-text">logical assignment operators</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%80%BB%E8%BE%91%E6%88%96%E8%B5%8B%E5%80%BC%E8%BF%90%E7%AE%97"><span class="toc-number">6.3.1.</span> <span class="toc-text">逻辑或赋值运算</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%80%BB%E8%BE%91%E7%A9%BA%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">6.3.2.</span> <span class="toc-text">逻辑空运算符</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%80%BB%E8%BE%91%E4%B8%8E%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">6.3.3.</span> <span class="toc-text">逻辑与运算符</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ES12%E5%AE%83%E7%9F%A5%E8%AF%86%E7%82%B9"><span class="toc-number">6.4.</span> <span class="toc-text">ES12它知识点</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%80%BB%E7%BB%93"><span class="toc-number">7.</span> <span class="toc-text">总结</span></a></li></ol>
    </div>

    <div id="share-footer" style="display: none">
      <ul>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.facebook.com/sharer.php?u=https://danyuan30.gitee.io/2022/02/05/JavaScript/ES6+/"><i class="fab fa-facebook fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://twitter.com/share?url=https://danyuan30.gitee.io/2022/02/05/JavaScript/ES6+/&text=ES6+"><i class="fab fa-twitter fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.linkedin.com/shareArticle?url=https://danyuan30.gitee.io/2022/02/05/JavaScript/ES6+/&title=ES6+"><i class="fab fa-linkedin fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://pinterest.com/pin/create/bookmarklet/?url=https://danyuan30.gitee.io/2022/02/05/JavaScript/ES6+/&is_video=false&description=ES6+"><i class="fab fa-pinterest fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=ES6+&body=Check out this article: https://danyuan30.gitee.io/2022/02/05/JavaScript/ES6+/"><i class="fas fa-envelope fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://getpocket.com/save?url=https://danyuan30.gitee.io/2022/02/05/JavaScript/ES6+/&title=ES6+"><i class="fab fa-get-pocket fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://reddit.com/submit?url=https://danyuan30.gitee.io/2022/02/05/JavaScript/ES6+/&title=ES6+"><i class="fab fa-reddit fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.stumbleupon.com/submit?url=https://danyuan30.gitee.io/2022/02/05/JavaScript/ES6+/&title=ES6+"><i class="fab fa-stumbleupon fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://digg.com/submit?url=https://danyuan30.gitee.io/2022/02/05/JavaScript/ES6+/&title=ES6+"><i class="fab fa-digg fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.tumblr.com/share/link?url=https://danyuan30.gitee.io/2022/02/05/JavaScript/ES6+/&name=ES6+&description="><i class="fab fa-tumblr fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://news.ycombinator.com/submitlink?u=https://danyuan30.gitee.io/2022/02/05/JavaScript/ES6+/&t=ES6+"><i class="fab fa-hacker-news fa-lg" aria-hidden="true"></i></a></li>
</ul>

    </div>

    <div id="actions-footer">
        <a id="menu" class="icon" href="#" onclick="$('#nav-footer').toggle();return false;"><i class="fas fa-bars fa-lg" aria-hidden="true"></i> 菜单</a>
        <a id="toc" class="icon" href="#" onclick="$('#toc-footer').toggle();return false;"><i class="fas fa-list fa-lg" aria-hidden="true"></i> 目录</a>
        <a id="share" class="icon" href="#" onclick="$('#share-footer').toggle();return false;"><i class="fas fa-share-alt fa-lg" aria-hidden="true"></i> 分享</a>
        <a id="top" style="display:none" class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fas fa-chevron-up fa-lg" aria-hidden="true"></i> 返回顶部</a>
    </div>

  </div>
</div>

        
        <footer id="footer">
  <div class="footer-left">
    Copyright &copy;
    
    
    2021-2022
    柯里的语法糖
  </div>
  <div class="footer-right">
    <nav>
      <ul>
        <!--
       --><li><a href="/">首页</a></li><!--
     --><!--
       --><li><a href="/tags/">标签</a></li><!--
     --><!--
       --><li><a href="/categories/">分类</a></li><!--
     --><!--
       --><li><a href="/archives/">归档</a></li><!--
     --><!--
       --><li><a target="_blank" rel="noopener" href="http://github.com/twitzz">项目</a></li><!--
     --><!--
       --><li><a href="/about/">关于</a></li><!--
     --><!--
       --><li><a href="/search/">搜索</a></li><!--
     -->
      </ul>
    </nav>
  </div>
</footer>

    </div>
    <!-- styles -->



  <link rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" crossorigin="anonymous" onload="this.onload=null;this.rel='stylesheet'"/>


    <!-- jquery -->
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script> 




<!-- clipboard -->

  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.7/clipboard.min.js" crossorigin="anonymous"></script> 
  
  <script type="text/javascript">
  $(function() {
    // copy-btn HTML
    var btn = "<span class=\"btn-copy tooltipped tooltipped-sw\" aria-label=\"复制到粘贴板!\">";
    btn += '<i class="far fa-clone"></i>';
    btn += '</span>'; 
    // mount it!
    $(".highlight table").before(btn);
    var clip = new ClipboardJS('.btn-copy', {
      text: function(trigger) {
        return Array.from(trigger.nextElementSibling.querySelectorAll('.code')).reduce((str,it)=>str+it.innerText+'\n','')
      }
    });
    clip.on('success', function(e) {
      e.trigger.setAttribute('aria-label', "复制成功!");
      e.clearSelection();
    })
  })
  </script>


<script src="/js/main.js"></script>

<!-- search -->

<!-- Google Analytics -->

<!-- Baidu Analytics -->

<!-- Cloudflare Analytics -->

<!-- Umami Analytics -->

<!-- Disqus Comments -->

<!-- utterances Comments -->

</body>
</html>
